﻿@section styles{
    <environment names="Development">
        <link href="~/lib/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet" asp-append-version="true" />
    </environment>
    <environment names="Staging,Production">
        <link href="~/lib/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.min.css" rel="stylesheet" asp-append-version="true" />
    </environment>
}

<div class="container-fluid" id="taskStatusesView">
    <!-- Tasks -->
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>
                        TASK STATUS
                    </h2>
                </div>
                <div class="body">
                    <div class="dataTables_wrapper form-inline dt-bootstrap">
                        <div class="row" style="margin-left:10px;">
                            <input name="status" type="radio" id="Init" value="Init" v-model="status" @@click="statusChanged('Init')"/>
                            <label for="Init">Init</label>
                            <input name="status" type="radio" id="Running" value="Running" v-model="status" @@click="statusChanged('Running')"/>
                            <label for="Running">Running</label>
                            <input name="status" type="radio" id="Stopped" value="Stopped" v-model="status" @@click="statusChanged('Stopped')"/>
                            <label for="Stopped">Stopped</label>
                            <input name="status" type="radio" id="Exited" value="Exited" v-model="status" @@click="statusChanged('Exited')"/>
                            <label for="Exited">Exited</label>
                            <input name="status" type="radio" id="Finished" value="Finished" v-model="status" @@click="statusChanged('Finished')"/>
                            <label for="Finished">Finished</label>
                            <input name="status" type="radio" id="All" value="All" v-model="status" @@click="statusChanged('All')"/>
                            <label for="All">All</label>
                            <span style="margin-left:10px;">Keyword:</span>
                            <input style="width:400px;" type="search" v-model="keyword" class="form-control input-sm" placeholder="" v-on:keypress="query($event)">
                        </div>
                        <br />
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover no-footer">
                                <thead>
                                    <tr role="row">
                                        <th>NAME</th>
                                        <th>NODE</th>
                                        <th>TIME</th>
                                        <th>STATUS</th>
                                        <th>THREAD</th>
                                        <th>LEFT</th>
                                        <th>SUCCESS</th>
                                        <th>ERROR</th>
                                        <th>TOTAL</th>
                                        <th>DOWNLOAD SPD</th>
                                        <th>PROCESS SPD</th>
                                        <th>PIPELINE SPD</th>
                                        <th>VIEW</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-show="taskStatuses.length==0">
                                        <td colspan="13">
                                            No data to display...
                                        </td>
                                    </tr>
                                    <tr role="row" v-for="(taskStatus,index) in taskStatuses">
                                        <td v-text="taskStatus.name"></td>
                                        <td v-text="taskStatus.nodeId"></td>
                                        <td v-text="taskStatus.lastModificationTime"></td>
                                        <td v-text="taskStatus.status" :style="{'color':taskStatus.status=='Running'?'green':'#000'}"></td>
                                        <td v-text="taskStatus.thread"></td>
                                        <td v-text="taskStatus.left"></td>
                                        <td v-text="taskStatus.success"></td>
                                        <td v-text="taskStatus.error"></td>
                                        <td v-text="taskStatus.total"></td>
                                        <td v-text="taskStatus.avgDownloadSpeed"></td>
                                        <td v-text="taskStatus.avgProcessorSpeed"></td>
                                        <td v-text="taskStatus.avgPipelineSpeed"></td>
                                        <td><a :href="'/taskLog?filter=identity::'+taskStatus.identity+'|nodeid='+taskStatus.nodeId"><i title="node log">LOGS</i></a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div v-show="total>size" class="dataTables_info">Showing <span v-text="page"></span> to <span v-text="size"></span> of <span v-text="total"></span> entries</div>
                        <div v-show="total>size" class="dataTables_paginate paging_simple_numbers" id="pagination">
                            <ul class="pagination"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <environment names="Development">
        <script src="~/js/taskStatus/index.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/js/taskStatus/index.min.js" asp-append-version="true"></script>
    </environment>
}
